<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折线图</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="themes/smoothness/jquery-ui-1.8.21.css" />
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text:'折线图'
                },
                axes: [
                        {
                            type: 'category',
                            location: 'bottom',
                            zoomEnabled: true
                        }
                      ],
                series: [
                            {
                                type: 'column',
                                data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], ['E', 27], ['F', 85], ['D', 43], ['H', 29]]
                            },
                            {
                                type: 'line',
                                data: [['A', 69], ['B', 57], ['C', 86], ['D', 23], ['E', 70], ['F', 60], ['D', 88], ['H', 22]]
                            }
                        ]
            });
        });
    </script>
	</head>
	<body>
	 <div>
		<h3>折线图</h3>
        <div id="jqChart" style="width: 500px; height: 300px;">
        </div>
    </div>
	</body>
</html>
